<template>
  <div class="history">
    <p class="title" v-if="show">
      <span class="lshc">
        <img :src="lshc" alt />快速查看准确率
      </span>
      <router-link tag="span" to="/home/more" class="getmore">
        更多
        <img :src="getmore" alt />
      </router-link>
    </p>

    <div class="block">
      <el-timeline>
        <van-list
          v-model="loading"
          :finished="finished"
          @load="onLoad"
          finished-text="没有更多了"
          v-if="!show"
        >
          <el-timeline-item
            v-for="(l, index) in list"
            :key="index"
            :type="activities.type"
            :color="activities.color"
            :size="activities.size"
            :timestamp="l.time"
            :hide-timestamp="activities.hide"
          >
            <div class="history-content">
              <div class="list-name">
                <span class="name">{{l.title}}</span>
                <span class="time">{{l.time|formatDate}}</span>
              </div>
              <div class="list-content">{{l.content}}</div>
              <!--                        <div class="data-from">数据来源：baidu.com</div>-->
            </div>
          </el-timeline-item>
        </van-list>
        <el-timeline-item
          v-if="show"
          v-for="(l, index) in list"
          :key="index"
          :type="activities.type"
          :color="activities.color"
          :size="activities.size"
          :timestamp="l.time"
          :hide-timestamp="activities.hide"
        >
          <div class="history-content">
            <div class="list-name">
              <span class="name">{{l.title}}</span>
              <span class="time">{{l.time|formatDate}}</span>
            </div>
            <div class="list-content">{{l.content}}</div>
            <!--                        <div class="data-from">数据来源：baidu.com</div>-->
          </div>
        </el-timeline-item>
      </el-timeline>
    </div>
  </div>
</template>

<script>
import lshc from "../../assets/img/icon_lshc.png";
import getmore from "../../assets/img/icon_getmore.png";
export default {
  name: "History",
  props: ["show", "limit"],
  data() {
    return {
      lshc: lshc,
      getmore: getmore,

      activities: {
        content: "",
        timestamp: "2018-04-03 20:46",
        size: "normal",
        type: "primary",
        color: "#0bbd87",
        hide: true
      },
      list: [],
      page: 1,
      loading: false, //控制上拉加载的加载动画
      finished: false, //控制在页面往下移动到底部时是否调用接口获取数据
      isLoading: false //控制下拉刷新的加载动画
    };
  },

  mounted() {
    if (this.show) {
      this.page = 1;
      this.onLoad();
    }
  },
  methods: {
    onLoad() {
      let self = this;
      setTimeout(() => {
        self.$api.home
          .historyMsg(10, this.page, this.getCookie("token"))
          .then(res => {
            // 执行某些操作
            self.list = self.list.concat(res.data.data);
            self.loading = false;
            self.page++;
            if (res.data.data.length < 10) {
              self.finished = true;
            }
            if(res.data.res == 0){
              self.$emit("getDy",true)
            }else{
              self.$emit("getDy",false)
            }
          });
      }, 500);
    }
  }
};
</script>

<style scoped>
.history {
  padding: 0 1rem;
  margin: 0.5rem auto;
  background: #fff;
}
.title {
  height: 2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #eeeeee;
  font-size: 0.94rem;
  font-family: PingFang SC;
  font-weight: 500;
  color: rgba(51, 51, 51, 1);
  margin: 0 0 1rem 0 !important;
}
.title span {
  display: inline-flex;
  align-items: center;
}
.title .lshc {
  font-size: 0.94rem;
  font-family: PingFang SC;
  font-weight: 500;
  color: rgba(51, 51, 51, 1);
}
.title .lshc img {
  width: 1rem;
  margin-right: 0.5rem;
}
.title .getmore {
  font-size: 0.75rem;
  color: #999;
  margin-right: 0.2rem;
}
.title .getmore img {
  width: 0.44rem;
}
.history .block {
  /*margin-top: 1rem!important;*/
}
.history-content {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
}
.history-content > div {
  width: 100%;
}
.list-name {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.list-name .name {
  font-size: 0.94rem;
  font-family: PingFang SC;
  font-weight: bold;
  color: rgba(20, 163, 101, 1);
}
.list-name .name span {
  font-size: 0.64rem;
}
.list-name .time {
  font-size: 0.69rem;
  font-family: PingFang SC;
  font-weight: 500;
  color: rgba(153, 153, 153, 1);
}
.list-content {
  margin: 1rem 0 0.5rem 0;
  font-size: 0.81rem;
  font-family: PingFang SC;
  font-weight: 500;
  color: rgba(51, 51, 51, 1);
  text-align: left;
}
.data-from {
  font-size: 0.63rem;
  font-family: PingFang SC;
  font-weight: 500;
  color: rgba(153, 153, 153, 1);
  text-align: right;
}
</style>
<style>
.el-timeline-item__node--normal {
  width: 0.38rem !important;
  height: 0.38rem !important;
  left: 2px !important;
}

.el-timeline-item__wrapper {
  padding-left: 18px !important;
  top: 3px !important;
}
</style>











